<template>
	<view>
		<view class="dyk" style="padding: 40rpx;">
			<text class="qf">泉州风光</text>
			<swiper circular indicator-dots="true" :autoplay="true"
			:interval="5000" :duration="500">
			    <swiper-item style="background-color: #808080;">
			        <image class="ty" src="/static/city5.jpg" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image class="ty" src="/static/city4.jpg" mode="widthFix"></image>
				</swiper-item>
				<swiper-item>
					<image class="ty" src="/static/city3.jpg" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="dyk">
			<view class="qf"><text>泉州介绍</text></view>
			<view class="qf1"><text>海上丝绸之路起点-泉州</text></view>
			<view class="qf2"><text><text class="jc">历史文化：</text>泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”</text></view>
			<view class="qf2"><text><text class="jc">著名景点：</text>清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等</text></view>
			<view class="qf2"><text><text class="jc">特色文化：</text>拥有<text class="xl">南音、木偶戏</text>和<text class="xl">闽南建筑</text>等丰富的非物质文化遗产</text></view>
		</view>
		<view class="dyk">
			<view class="qf">探索进度</view>
			<view>当前进度：{{ progress }}</view>
			<view>
				<slider :value="progress" @change="onSliderChange" min="0" max="100" show-value ></slider>
			</view>
		</view>
		<view class="dyk">
			<view class="qf">选择城市</view>
			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
			:value="multiIndex" :range="multiArray">
			<view>
				{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
			</view>
			</picker>
		</view>
		<view class="dyk">
			<view class="qf">泉州宣传</view>
			<view>
				<video id="myVideo" src="/static/city-video.mp4"
				@error="videoErrorCallback" controls poster="/static/music-poster.jpg"></video>
			</view>
		</view>
		<view class="dyk">
			<view class="qf">偏好设置</view>
			<view class="setting-item">
			<view>出行方式：</view>
			    <view class="radio-group">
				<label class="radio-item" v-for="(item,index) in travelModes" :key="index">
				<radio :value="item.value"
				v-model="selectedTravelMode"
				color="#007aff" />
				<text class="wz">{{ item.name }}</text>
				</label>
			    </view>
			</view>
			<view class="setting-item">
				<view>显示推荐景点：</view>
				<switch
				v-model="showRecommend"
				color="#007aff"  />
			</view>
			<view class="setting-item">
				<view>探索半径：{{ radius }}km</view>
				<slider 
				v-model="radius"
				min="1"
				max="50"
				step="1"
				show-value
				activeColor="#007aff"
				backgroundColor="#eeeeee"
				@change="onRadiusChange"></slider>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      progress: 60,
      multiArray: [
        ['亚洲', '欧洲'], 
        ['中国', '日本', '韩国'],
        ['北京市', '福建省', '广东省'] 
      ],
      multiIndex: [0, 0, 0] ,
	  onReady:function(res){
		  this.videoContext = uni.createVideoContext('myVideo')
	  },
	  travelModes: [
	    { name: '公交', value: 'bus' },
	    { name: '自驾', value: 'drive' },
	    { name: '步行', value: 'walk' }
	    ],
	    selectedTravelMode: 'bus',
	    showRecommend: true,
	    radius: 10
    }
  },
  methods: {
    onSliderChange(e) {
      this.progress = e.detail.value;
    },
	onRadiusChange(e){
		this.radius = e.detail.value;
	},
    bindMultiPickerColumnChange: function(e) {
      console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value);
      this.multiIndex[e.detail.column] = e.detail.value;

      switch (e.detail.column) {
        case 0: 
          switch (this.multiIndex[0]) {
            case 0: 
              this.multiArray[1] = ['中国', '日本', '韩国'];
              this.multiArray[2] = ['北京市', '福建省', '广东省']; 
              this.multiIndex[1] = 0; 
              this.multiIndex[2] = 0;
              break;
            case 1:
              this.multiArray[1] = ['英国', '法国', '德国'];
              this.multiArray[2] = ['英格兰', '苏格兰', '威尔士'];
              this.multiIndex.splice(1, 1, 0); 
              this.multiIndex.splice(2, 1, 0); 
              break;
          }
          break;

        case 1:
          switch (this.multiIndex[0]) { 
            case 0:
              switch (this.multiIndex[1]) {
                case 0:
                  this.multiArray[2] = ['北京市', '福建省', '广东省'];
                  break;
                case 1:
                  this.multiArray[2] = ['东京', '大阪', '京都'];
                  break;
                case 2:
                  this.multiArray[2] = ['首尔', '釜山', '仁川'];
                  break;
              }
              break;
            case 1:
              switch (this.multiIndex[1]) {
                case 0:
                  this.multiArray[2] = ['英格兰', '苏格兰', '威尔士'];
                  break;
                case 1:
                  this.multiArray[2] = ['巴黎', '里昂', '马赛'];
                  break;
                case 2:
                  this.multiArray[2] = ['柏林', '慕尼黑', '汉堡'];
                  break;
              }
              this.multiIndex.splice(2, 1, 0);
              break;
          }
          break;
      }

      this.$forceUpdate();
    },
	
  }
}
</script>

<style>
.dyk{
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-top: 15px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin: auto;
	margin-bottom: 20px;
}
.qf{
	font-size: 22px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10px;
}
.ty{
	width: 100%;
	border-radius: 4px;
}
.qf1{
	font-size: 19px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10px;
}
.qf2{
	color: #333;
	display: block;
	margin-bottom: 10px;
}
.jc{
	font-weight: bold;
}
.xl{
	color: blue;
}
.radio-group{
	display: flex;
	gap: 40rpx;
}
.radio-item{
	display: flex;
    align-items: center;
	gap: 8rpx;
}
.wz{
	font-size: 30rpx;
	color: #666666;
}
.setting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 0;
  border-bottom: 1px solid #000000;
}
</style>
